<!-- RoleNav.vue -->
<template>
  <nav class="role-nav d-flex justify-content-center my-4">
    <div
      class="btn-group"
      role="group"
      aria-label="角色选择"
    >
      <button
        v-for="(role, index) in roles"
        :key="index"
        type="button"
        :class="['btn', currentRole === role ? 'btn-primary' : 'btn-outline-primary']"
        @click="$emit('update:current-role', role)"
      >
        {{ role }}
      </button>
    </div>
  </nav>
</template>

<script setup>
defineProps({
  roles: Array,
  currentRole: String
});
defineEmits(['update:current-role']);
</script>

<style scoped>
/* 可以添加一些自定义样式 */
.role-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.nav-button {
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: 500;
  color: #374151;
  transition: all 0.2s ease;
}

.nav-button:hover {
  color: #111827;
}

.nav-button.active {
  color: #2563eb;
  font-weight: bold;
  border-bottom: 2px solid #2563eb;
}

</style>